<html>
<head>
    <link rel="stylesheet" type="text/css" media="screen" href="../dist/w2ui.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="../libs/font-awesome/css/font-awesome.css" />
    <script type="text/javascript" src="../libs/jquery/jquery-3.5.1.min.js"></script>
    <script type="module" src="../src/w2compat.js?globals"></script>
    <script>
        $(function () {
            $('.color').w2field('color');
        });
    </script>
    <style>
    .div {
        margin-left: 20px;
        margin-top: 5px;
    }
    .preview {
        display: inline-block;
        width: 23px;
        height: 23px;
        float: left;
    }
    .color {
        width: 150px;
        margin-left: 10px;
    }
    .first {
        float: left;
        }
    .left {
        float: left;
    }
    </style>
<body>
    <div class="first">
        <img src="colors.png" style="width: 300px">
    </div>
    <div class="left">
        <div class="div">
            <div class="preview"></div>
            <input class="color" onchange="setColor(this)">
        </div>
        <div class="div">
            <div class="preview"></div>
            <input class="color" onchange="setColor(this)">
        </div>
        <div class="div">
            <div class="preview"></div>
            <input class="color" onchange="setColor(this)">
        </div>
        <div class="div">
            <div class="preview"></div>
            <input class="color" onchange="setColor(this)">
        </div>
        <div class="div">
            <div class="preview"></div>
            <input class="color" onchange="setColor(this)">
        </div>
        <div class="div">
            <div class="preview"></div>
            <input class="color" onchange="setColor(this)">
        </div>
        <div class="div">
            <div class="preview"></div>
            <input class="color" onchange="setColor(this)">
        </div>
    </div>
    <script>
        function setColor(el) {
            $(el).prev().css('background-color', '#'+el.value)
        }
    </script>
</body>
</html>
